<script setup lang="ts">
    import { ref } from 'vue'
    import { onMounted } from 'vue'
    import type {articlesData} from '@/modules/manage'
    import axios from 'axios';
    import { useArticleStore } from '@/store/articleDetail';
    import { useRouter } from 'vue-router';
    import { useLoginStore } from '@/store/login';

    const router = useRouter();
    const administorStore = useArticleStore();
    const loginStore = useLoginStore();
    const searchData = ref({
        articleTitle: '',
        updateTime: '',
    })
  const articleStore = useArticleStore();
  let tableData = ref<articlesData[]>([]);
  const columns = ref<any[]>([]);
  columns.value = [
    { title: '标题', dataIndex: 'title', key: 'title' ,width: '150px'},
    { 
        title: '标签', 
        key: 'tags',
        slots:{customRender: 'tags'},
        width: '300px'},
    { 
      title: '操作', 
      key: 'action',
      slots: { customRender: 'action' },
      width: '15%'
    }
  ];

  const getArticlesData = async () => {

    const response = await administorStore.getArticlesById(parseInt(loginStore.accountId));
    tableData.value = response;
  };

  onMounted(getArticlesData);

  const articleDelete = async(record: articlesData) => {
    await axios.delete(`http://192.168.1.8:8000/deleteArticle/${record.id}`);
    await getArticlesData();
  }

  const pushToDetail = (record: articlesData) => {
      articleStore.articleContent= record.content
      console.log(articleStore.articleContent);
      
      router.push(`/article/${record.id}`)
  }

</script>

<template>
    <div style="flex-direction: column;">
        <div class="form-head-body">
            <div style="display: flex; align-items: center;">
                <div style="display: flex; align-items: center;justify-content: flex-end; margin-right: 37px;">
                      <p><span style="color: red;">*</span><span>文章标题：</span></p>
                      <a-input v-model:value="searchData.articleTitle" placeholder="" style="width: 18.5vw;"/>
                </div>
                <div style="display: flex; align-items: center;justify-content: flex-end; margin-right: 37px;">
                      <p><span style="color: red;">*</span><span>更新时间：</span></p>
                      <a-input v-model:value="searchData.updateTime" placeholder="" style="width: 18.5vw;"/>
                </div>
            </div>
            <div style="display: flex; align-items: center;">
                <a-button type="primary" style="margin-right: 16px;">搜索</a-button>
                <a-button>重置</a-button>
            </div>
        </div>
        <div class="form-head-body" style="height: 580px;">
        <a-table 
            :dataSource="tableData" 
            :columns="columns" 
            rowKey="id"
            :pagination="{ pageSize: 6 }"
            style="width: 100%;display: flex;justify-content: center;"
            @click="pushToDetail"
        >
            <template #tags="{ record }">
            <a-tag v-for="tag in record.tags" :key="tag.id" color="blue">{{ tag.name }}</a-tag>
            </template>
            <template #action="{ record }">
            <a-space>
                <a-button @click="pushToDetail(record)" type="primary">详情</a-button>
                <a-button @click="articleDelete(record)" type="primary">删除</a-button>
            </a-space>
            </template>
        </a-table>
        </div>
    </div>
</template>

<style lang="css" scoped>
    .form-head-body{
        display: flex;
        justify-content: space-between;
        margin: 16px; background-color: #fff;
    }
</style>